<template>
		<view class="share" :animation="animationData" >
			<view class="title">
				<text>分享给好友</text>
			</view>
			<view class="btn-list">
				<view class="btn" v-for="(btn, index) in btnList" :key="index">
					<view class="btn-icon">
						<image :src="btn.icon" mode=""></image>
					</view>
					<text>{{btn.name}}</text>
				</view>
			</view>
			<view class="exit">
				<button type="default" @click="cancel">取消</button>
			</view>
		</view>
</template>

<script>
	import {qq_icon, qq_r_icon, wechat_s_icon, wechat_r_icon, link_icon, share_more_icon} from '@/static/svg/index.js'
	export default {
		name: 'Share',
		data () {
			return {
				animationData: {},
				isShow: true,
				btnList: [
					{ name: 'QQ好友', icon: qq_icon },
					{ name: 'QQ空间', icon: qq_r_icon },
					{ name: '微信好友', icon:  wechat_s_icon },
					{ name: '朋友圈', icon: wechat_r_icon },
					{ name: '复制链接', icon: link_icon },
					{ name: '更多', icon: share_more_icon }
				]
			}
		},
		onShow() {
			this.ani()
		},
		mounted () {
		   var animation = uni.createAnimation({
		     duration: 1000,
		       timingFunction: 'ease',
		   })
					
		   this.animation = animation
				
		   animation.translateY(-430).step()
				
		   this.animationData = animation.export()
				
		},
		methods: {
			show () {
				this.ani()
				this.isShow = !this.isShow
			},
			cancel () {
			 // 取消	
			 this.$emit('close')
			},
			ani () {
				var animation = uni.createAnimation({
					duration: 600,
					timingFunction: 'ease-in',
				})
				this.animation = animation
				let ani = null
				if ( !this.isShow ) {
					animation.translateY(420).step()
					ani = animation.export()
				} else {
					animation.translateY(0).step()
					ani = animation.export()
				}
				// animation.scale(0.5).step()
				
				this.animationData = ani
			}
		}
	}
</script>

<style lang="less" scoped>
	.share {
		position: fixed;
		left: 0;
		bottom: -860upx;
		width: 100%;
		height: 860upx;
		background-color: #FFFFFF;
		border-radius: 80upx 80upx 0 0;
		color: rgba(16, 16, 16, 100);
		font-size: 28upx;
		.title {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding-top: 60upx;
			padding-bottom: 72upx;
			text {
				color: rgba(16, 16, 16, 100);
				font-size: 32upx;
			}
		}
		.btn-list {
			width: 100%;
			padding: 0 80upx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.btn {
				margin-top: 60upx;
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.btn-icon {
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					background-color: #101010;
					margin-bottom: 20upx;
					image {
						width: 44upx;
						height: 44upx;
					}
				}
				text {
					color: rgba(200, 200, 200, 100);
					font-size: 28upx;
				}
			}
		}
		.exit {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100upx;
			background-color: #F4F4F4;
			button {
				width: 100%;
				height: 100%;
				background-color: #F4F4F4;
				line-height: 100upx;
				text-align: center;
			}
		}
	}
</style>
